<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" >

<title>Flutter 安装与入门 | 迷航</title>
<meta name="description" content="人可以迷失方向，但是不能停下脚步！">

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="shortcut icon" href="https://tingke.gitee.io/post/favicon.ico?v=1690805106645">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.10.0/katex.min.css">
<link rel="stylesheet" href="https://tingke.gitee.io/post/styles/main.css">



<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.bootcss.com/highlight.js/9.12.0/highlight.min.js"></script>

<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />



  </head>
  <body>
    <div id="app" class="main">

      <div class="sidebar" :class="{ 'full-height': menuVisible }">
  <div class="top-container" data-aos="fade-right">
    <div class="top-header-container">
      <a class="site-title-container" href="https://tingke.gitee.io/post">
        <img src="https://tingke.gitee.io/post/images/avatar.png?v=1690805106645" class="site-logo">
        <h1 class="site-title">迷航</h1>
      </a>
      <div class="menu-btn" @click="menuVisible = !menuVisible">
        <div class="line"></div>
      </div>
    </div>
    <div>
      
        
          <a href="/" class="site-nav">
            首页
          </a>
        
      
        
          <a href="/archives" class="site-nav">
            归档
          </a>
        
      
        
          <a href="/tags" class="site-nav">
            标签
          </a>
        
      
        
          <a href="/post/about" class="site-nav">
            关于
          </a>
        
      
    </div>
  </div>
  <div class="bottom-container" data-aos="flip-up" data-aos-offset="0">
    <div class="social-container">
      
        
      
        
      
        
      
        
      
        
      
    </div>
    <div class="site-description">
      人可以迷失方向，但是不能停下脚步！
    </div>
    <div class="site-footer">
      Powered by <a href="https://github.com/getgridea/gridea" target="_blank">Gridea</a> Copyright © 2019 | <a class="rss" href="https://tingke.gitee.io/post/atom.xml" target="_blank">RSS</a>
    </div>
  </div>
</div>


      <div class="main-container">
        <div class="content-container" data-aos="fade-up">
          <div class="post-detail">
            <h2 class="post-title">Flutter 安装与入门</h2>
            <div class="post-date">2019-09-01</div>
            
              <div class="feature-container" style="background-image: url('https://tingke.gitee.io/post/post-images/flutter-an-zhuang-yu-ru-men.png')">
              </div>
            
            <div class="post-content">
              <h1 id="flutter-入门">Flutter 入门</h1>
<h3 id="网站">网站：</h3>
<p>官方：https://flutter.io/docs/development/tools/ide/vs-code<br>
中文网：https://flutterchina.club/setup-macos/</p>
<!-- more -->
<h3 id="安装与配置">安装与配置：</h3>
<ol>
<li>
<p>下载Flutter</p>
<pre><code class="language-bash">cd ~
git clone -b master https://github.com/flutter/flutter.git
</code></pre>
</li>
<li>
<p>vscode 安装 Flutter 插件</p>
</li>
<li>
<p>本地配置路径</p>
<pre><code class="language-bash">vim ~/.zshrc
</code></pre>
<p>输入以下代码</p>
<pre><code>#for flutter by 2018-11-13
export PATH=/Users/kun/flutter/bin:$PATH	
export PUB_HOSTED_URL=https://dart-pub.mirrors.sjtug.sjtu.edu.cn
export FLUTTER_STORAGE_BASE_URL=https://mirrors.sjtug.sjtu.edu.cn
</code></pre>
</li>
<li>
<p>vscode 导入本地 Flutter SDK</p>
</li>
<li>
<p>cd 到 Flutter 根目录 运行 <code>flutter doctor</code> 安装相关包</p>
</li>
</ol>
<h3 id="简单命令">简单命令</h3>
<pre><code>flutter -h // 帮助

flutter create 【文件名称】 // 创建工程

flutter run // 运行,默认运行 lib/main.dart,如果 main 函数不 在main.dart 中需指定文件
</code></pre>
<h3 id="常用快捷键">常用快捷键</h3>
<pre><code>r 键：点击后热加载，也就算是重新加载吧。
R 键：点击后热重载，也就算是重新加载吧。
p 键：显示网格，这个可以很好的掌握布局情况，工作中很有用。
o 键：切换android和ios的预览模式。
q 键：退出调试预览模式。
</code></pre>

            </div>
            
            
              <div class="next-post">
                <div class="next">下一篇</div>
                <a href="https://tingke.gitee.io/post/post/css-si-da-bu-ju/">
                  <h3 class="post-title">
                    CSS 四大布局
                  </h3>
                </a>
              </div>
            

            

          </div>

        </div>
      </div>
    </div>

    <script src="https://unpkg.com/aos@next/dist/aos.js"></script>

<script type="application/javascript">

AOS.init();

hljs.initHighlightingOnLoad()

var app = new Vue({
  el: '#app',
  data: {
    menuVisible: false,
  },
})

</script>




  </body>
</html>
